<!-- 人员信息管理 -->
<template>
  <div class="module_">
    <div class="flex-space-between mb8">
      <el-form :inline="true" :model="pageparm" class="search_box subSearch">
        <!-- <el-form-item label="搜索：">
          <el-select v-model="pageparm.department_id" placeholder="选择一级科室" style="height:32px">
            <el-option
              v-for="item in cacheDepartments"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-select v-model="pageparm.sub_department_id" placeholder="选择二级科室" style="height:32px">
            <el-option
              v-for="item in cacheSubDepartments"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-select v-model="pageparm.type" placeholder="选择职员类别" style="height:32px">
            <el-option
              v-for="(item,index) in peopleType"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <br/> -->
        <el-form-item class="" label='搜索：'>
          <el-input
            size="small"
            v-model="pageparm.code"
            placeholder="输入工号搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            size="small"
            v-model="pageparm.name"
            placeholder="输入职员名称搜索"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="pageparm.position"  placeholder="请选择岗位" clearable @change="onChange">
            <el-option
              v-for="(item,index) in employeePosition"
              :key="index"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="clearSearch">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button class="mr8" size="small" type="primary" @click="handle(null,{},3)">新建员工</el-button>
    </div>
    <el-table
      :data="tableData"
      :style="{width: '100%'}"
      class="flex-1"
      height="150" size="small" 
      border 
      highlight-current-row
      v-loading="tableLoading"
      stripe
      @sort-change="tableSortChange">  
      <el-table-column
        align="center"
        prop="name"
        label="职员姓名"
        width="150"
        sortable="custom"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        align="center"
        prop="code"
        label="工号"
        width="150"
        sortable="custom"
        show-overflow-tooltip>
      </el-table-column>
      <!-- <el-table-column
        align="center"
        prop="type"
        label="人员类别"
        width="150"
        sortable="custom"
        show-overflow-tooltip>
        <template slot-scope="scope">{{type_filter(scope.row.type) }}</template>
      </el-table-column> -->
      <el-table-column
        align="center"
        prop="coefficient"
        label="岗位系数"
        width="150"
        sortable="custom"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        align="center"
        prop="position"
        label="岗位"
        width="150"
        sortable="custom"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{echoPosition(scope.row.position)}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="professional_rank_type"
        label="职称分类"
        width="150"
        sortable="custom"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{echoProfessional(scope.row.professional_rank_type)}}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="scope">
          <el-tooltip  effect="dark" content="修改信息" placement="bottom-end">
            <el-button size="mini"  @click="handle(scope.$index, scope.row,2)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip  effect="dark" content="删除" placement="bottom-end">
            <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
          <el-tooltip  effect="dark" content="绑定角色" placement="bottom-end">
            <el-button size="mini" type="warning" @click="bindRolesFun(scope.$index, scope.row)" icon="el-icon-user" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <el-dialog :visible.sync="editFormVisible" width="50%" @click="editFormVisible = false">
      <el-form label-width="120px" :model="editForm">
        <el-row>
          <el-col :span="12" v-if="!disabled">
            <el-form-item label="职员姓名" class="tip">
              <el-input size="small" v-model="editForm.name" auto-complete="off" placeholder="请输入职员姓名"></el-input>
            </el-form-item>
            <el-form-item label="工号" class="tip">
              <el-input size="small" v-model="editForm.code" auto-complete="off" placeholder="请输入员工工号" ></el-input>
            </el-form-item>
            <!-- <el-form-item label="人员类别" class="tip">
              <el-select v-model="editForm.type"  placeholder="请选择" >
                <el-option
                  v-for="(item,index) in peopleType"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="系数" >
              <el-input size="small" v-model="editForm.coefficient" auto-complete="off" placeholder="请输入岗位系数" ></el-input>
            </el-form-item>
            <el-form-item label="岗位" class="tip"> 
              <el-select v-model="editForm.position"  placeholder="请选择岗位" >
                <el-option
                  v-for="(item,index) in employeePosition"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="职称分类" class="tip"> 
              <el-select v-model="editForm.professional_rank_type"  placeholder="请选择职称" >
                <el-option
                  v-for="(item,index) in professionalRankType"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" v-if="!disabled">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>

    <!-- //绑定角色dialog -->
    <el-dialog
      class="dialog"
      :visible.sync="bindRoles"
      width="50%"
      @click="bindRoles = false"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
    >
      <el-form label-width="120px" :model="editForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="职员" class="tip">
              <el-input size="small" v-model="bindRolesObj.employees_name" auto-complete="off" disabled></el-input>
            </el-form-item>
            <el-form-item label="角色" class="tip">
              <el-select v-model="bindRolesObj.roles_id" placeholder="请选择">
                <el-option
                  v-for="item in cacheRoulsList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="bindRoles = false">取 消</el-button>
        <el-button type="primary" @click="bindSubmit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {Apiemployees,
        ApiemployeesAdd,
        ApiemployeesPut,
        ApiemployeesDel,
        ApiemployeerolesAdd
} from '@/api'
import  {mapState,mapActions} from 'vuex'
import { debounce } from "@/utils/index";
import { employeePosition ,peopleType,professionalRankType} from '@/assets/js'
export default {
  computed:{
    ...mapState(['cacheDepartments','cacheSubDepartments','cacheRoulsList'])
  },
  data(){
    return{
      employeePosition,
      peopleType,
      professionalRankType,
      tableData:[], 
      disabled: false,
      editFormVisible: false, 
      editForm: {
        department:{}
      },  //修改或者查看详情

      pageparm: {
        page: 1,
        perPage: 20,
        total: null,
        sort_str: 'updated_at', 
        sort_order: 'desc' ,
        code: null, 
        name: null,
        department_id: null,
        sub_department_id: null,
        type: null,
        position: null 
      },
      tableLoading: false,

      //  'sub_departments_id','type'
      rules:['name','code','position','professional_rank_type'],

      bindRoles:false,   //绑定角色
      bindRolesObj:{
        employees_id:null,
        employees_name:null,
        roles_id:null
      },
      btnLoading: false
    }
  },
  mounted(){
    this.getList()
    setTimeout(() => {
      if(this.cacheRoulsList.length === 0) this.getCacheRoulsList()
    },200)
  },
  methods:{
    ...mapActions(['getCacheRoulsList']),
    echoPosition(i){
      const index = this.employeePosition.findIndex(item=>item.value == i)
      const label = index > -1 ? this.employeePosition[index].label : i
      return label
    },
    echoProfessional(i){
      let label
      for (const item of this.professionalRankType) {
        if(item.value === i){
          label = item.label
          break;
        }
      }
      return label
    },
    bindRolesFun(index,item){
      this.bindRolesObj.employees_id = item.id
      this.bindRolesObj.employees_name = item.name
      this.bindRoles = true
    },
    bindSubmit: debounce( function(){
      if(!this.bindRolesObj.roles_id){
        this.$message.error('请选择角色')
        return
      }
      this.btnLoading = true
      ApiemployeerolesAdd(this.bindRolesObj).then(res => {
        this.$message.success('绑定成功')
        this.bindRoles = false
      }).finally(()=>{
            this.btnLoading = false
        });
    },800,true),
    tableSortChange(column){
      if (column.order === "descending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.pageparm.sort_str = column.prop;
        this.pageparm.sort_order = "asc";
      }else{
        this.pageparm.sort_str = null;
        this.pageparm.sort_order = null;
      }
      if(column.prop == 'department.name') this.pageparm.sort_str = 'id'

      this.getList()
    },
    //搜索
    onChange(){
      this.pageparm.position = this.pageparm.position || null
      this.pageparm.page = 1
      this.getList()
    },
    search: debounce(function() {
      if(!this.pageparm.name) this.pageparm.name = null
      if(!this.pageparm.code) this.pageparm.code = null
      this.pageparm.page = 1
      this.getList()
    },800,true),
    clearSearch: debounce(function(){
      this.pageparm.page = 1
      this.pageparm = {...this.pageparm,department_id:null,name:null,code:null,sub_department_id:null,type:null,position:null}
      this.getList()
    },800,true),
    //分页
    callFather(pageparm){
      this.pageparm.page = pageparm.page
      this.pageparm.perPage = pageparm.perPage
      this.getList()
    },
    type_filter(val){
      let label
      for (const item of this.peopleType) {
        if(item.value == val){
          label =  item.label
          break;
        }
      }
      return label || val
    },
    getList(){
      this.tableLoading = true
      Apiemployees(this.pageparm).then(({data,page}) => {
        this.tableData = data || []
        this.pageparm.total = page.total
        this.tableLoading = false
      }).catch(()=>{
        this.tableLoading = false
      })
    },
    handle(index,value,i){
      this.editForm = {...value}
      this.editFormVisible = true
    },  
    deleteUser(index,value){
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          ApiemployeesDel(value.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          }).finally(()=>{
            loading.close()
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    submit : debounce(function(){   //提交  修改或新增
      const options = {...this.editForm}
      options.coefficient = this.editForm.coefficient || 1
      // let options = {
      //   name: editForm.name,
      //   // sub_departments_id: editForm.sub_departments_id,  //editForm.department.id
      //   code: editForm.code,
      //   type: editForm.type || '',
      //   coefficient: editForm.coefficient || 1,
      //   position: parseInt(editForm.position)
      // }
      for (const key of this.rules) {
        if(!options[key] && options[key] !== 0){
          this.$message({
            type: 'error',
            message: '必填信息请填写完整！'
          });
          return
        }
      }
      this.btnLoading = true
      if(options.id){   //有ID就是修改
        ApiemployeesPut(options,options.id).then(res => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          });
          this.editFormVisible = false
          this.getList()
        }).catch(()=>{
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
        }).finally(()=>{
            this.btnLoading = false
        });
      }else{
        ApiemployeesAdd(options).then(res => {
          this.$message({
            type: 'success',
            message: '添加成功!'
          });
          this.editFormVisible = false
          this.getList()
        }).catch(()=>{
          this.$message({
            type: 'error',
            message: '添加失败!'
          });
        }).finally(()=>{
            this.btnLoading = false
        });
      }
    },800,true)
  },

}
</script>

<style lang='less'>
.subSearch{
  .el-input__inner{
    height: 32px;
    width: 220px;
  }
}
</style>